<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>百度账户管理</span>
      </div>
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        class="ele-form-search"
        label-width="75px"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <div class="app-container">
          <div class="filter-container">
            <el-select
              v-model="where.bazaarId"
              class="filter-item"
              clearable
              placeholder="推广市场"
              style="width: 180px"
              @change="changeBazaarId"
            >
              <el-option
                v-for="item in BazaarList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.domainIds"
              class="filter-item"
              clearable
              placeholder="推广站点"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in DomainUrlList"
                :key="item.id"
                :label="item.DomainUrl"
                :value="item.id"
              />
            </el-select>

            <el-input
              v-model="where.username"
              class="filter-item"
              clearable
              placeholder="推广账户"
              style="width: 140px"
              @clear="reload"
            />

            <el-select
              v-model="where.ocpcType"
              class="filter-item"
              clearable
              placeholder="回传方式"
              prop="checkAge"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in ocpcTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="where.channelid"
              class="filter-item"
              clearable
              placeholder="开户渠道"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in channelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.customerid"
              class="filter-item"
              clearable
              placeholder="归属客户"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.contact"
              class="filter-item"
              clearable
              placeholder="负责人"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in principalList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.userStat"
              class="filter-item"
              clearable
              placeholder="推广账户状态"
              style="width: 140px"
              @change="reload"
              @clear="reload"
            >
              <el-option
                v-for="item in userStatList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button
              class="filter-item"
              icon="el-icon-search"
              type="primary"
              @click="reload"
              >搜索
            </el-button>

            <el-button
              class="filter-item"
              icon="el-icon-refresh"
              style="margin-left: 2px"
              @click="reset"
              >重置
            </el-button>
          </div>
        </div>
      </el-form>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :where="where"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="$hasPermission('sem:save')"
            icon="el-icon-plus"
            plain
            size="small"
            type="primary"
            @click="openEdit({})"
            >添加账户
          </el-button>
          <el-button
            v-if="$hasPermission('sem:delete')"
            :disabled="selection.length === 0"
            icon="el-icon-delete"
            plain
            size="small"
            type="danger"
            @click="removeBatch"
            >删除账户
          </el-button>
          <el-button
            v-if="$hasPermission('sem:refresh')"
            :disabled="selection.length === 0"
            icon="el-icon-refresh-right"
            plain
            size="small"
            type="success"
            @click="refreshBatch"
            >获取最新数据
          </el-button>
          <el-button
            v-if="$hasPermission('sem:ocpc')"
            :disabled="selection.length === 0"
            icon="el-icon-setting"
            plain
            size="small"
            @click="openOcpc(false)"
            >设置回传方式
          </el-button>
          <el-button
            v-if="$hasPermission('sem:ocpcbid')"
            :disabled="selection.length === 0"
            icon="el-icon-money"
            plain
            size="small"
            @click="refreshOcpcbid"
            >OCPC目标出价
          </el-button>
          <el-button
            v-if="$hasPermission('sem:regiontarget')"
            :disabled="selection.length === 0"
            icon="el-icon-eleme"
            plain
            size="small"
            @click="setRegionTargetBatch"
            >设置推广地域
          </el-button>
        </template>

        <!-- 推广地域列 -->
        <template slot="regionName" slot-scope="{ row }">
          <el-link
            v-if="!row.regionName"
            :underline="false"
            @click="openRegionTarget(row)"
          >
            未设置 <i class="el-icon-edit-outline"></i>
          </el-link>
          <el-link
            v-if="row.regionName"
            :underline="false"
            @click="openRegionTarget(row)"
          >
            {{ row.regionName }} <i class="el-icon-edit-outline"></i>
          </el-link>
        </template>

        <!-- 负责人列 -->
        <template slot="contact" slot-scope="{ row }">
          <template v-for="item in principalList">
            <span v-if="row.contact === item.id" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 落地页列 -->
        <template slot="domainurl" slot-scope="{ row }">
          <template v-for="item in TempDomainUrlList">
            <el-tooltip
              v-if="row.domainIds.indexOf(item.id) > -1"
              :key="item.id"
              placement="top"
            >
              <div slot="content">
                站点名称: {{ item.SiteName }}<br />站点落地页:
                {{ item.DomainUrl }}
              </div>
              <el-tag
                :disable-transitions="true"
                class="el-tag-line"
                size="mini"
                style="cursor: pointer"
                type="success"
              >
                <!-- {{ item.DomainUrl }} -->
                {{ item.DomainUrl.substring(0,14) + '...' }}
              </el-tag>
            </el-tooltip>
          </template>
        </template>

        <!-- 账户余额列 -->
        <template slot="balance" slot-scope="{ row }">
          <span class="bold-red">{{ row.balance }}</span>
        </template>

        <!-- 账户返点列 -->
        <template slot="rebate" slot-scope="{ row }">
          {{ row.rebate }}
        </template>

        <!-- 账户预算列 -->
        <template slot="budget" slot-scope="{ row }">
          <el-link :underline="false" @click="openBudget(row)"
            >{{ row.budget ? row.budget : "不限定预算" }}
            <i class="el-icon-edit-outline"></i>
          </el-link>
        </template>

        <!-- 账户预算列 -->
        <template slot="ocpcBid" slot-scope="{ row }">
          <el-link :underline="false" @click="openMaxPriceEdit(row)"
            >{{ row.ocpcBid }}
            <i class="el-icon-edit-outline"></i>
          </el-link>
        </template>

        <!-- 累计消费列 -->
        <template slot="cost" slot-scope="{ row }">
          {{ row.cost }}
        </template>

        <!-- 账户配额列 -->
        <template slot="userRquota" slot-scope="{ row }">
          <el-tag :disable-transitions="true" class="el-tag-line" size="mini"
            >账户: {{ formatquota(row.userRquota) }}
          </el-tag>
          <el-tag
            :disable-transitions="true"
            class="el-tag-line"
            size="mini"
            type="info"
            >统计: {{ formatquota(row.countRquota) }}
          </el-tag>
        </template>

        <!-- 回传方式列 -->
        <template slot="ocpcType" slot-scope="{ row }">
          <el-link :underline="false" @click="openOcpc(row)"
            >{{ ["", "自动回传", "手动回传"][row.ocpcType] }}
            <i class="el-icon-edit-outline"></i
          ></el-link>
        </template>

        <!-- 推广状态列 -->
        <template slot="userStat" slot-scope="{ row }">
          <el-tag v-if="row.userStat === 1" class="el-tag-line" size="mini"
            >开户金未到
          </el-tag>
          <el-tag
            v-if="row.userStat === 2"
            class="el-tag-line"
            size="mini"
            type="success"
            >正常生效
          </el-tag>
          <el-tag
            v-if="row.userStat === 3"
            class="el-tag-line"
            size="mini"
            type="warning"
            >余额为零
          </el-tag>
          <el-tag
            v-if="row.userStat === 4"
            class="el-tag-line"
            size="mini"
            type="warning"
            >未通过审核
          </el-tag>
          <el-tag
            v-if="row.userStat === 6"
            class="el-tag-line"
            size="mini"
            type="warning"
            >审核中
          </el-tag>
          <el-tag
            v-if="row.userStat === 7"
            class="el-tag-line"
            size="mini"
            type="danger"
            >被禁用
          </el-tag>
          <el-tag
            v-if="row.userStat === 11"
            class="el-tag-line"
            size="mini"
            type="warning"
            >预算不足
          </el-tag>
          <el-tag
            v-if="row.userStat === 888"
            class="el-tag-line"
            size="mini"
            style="cursor: pointer"
            type="danger"
            @click="openMessage(row, false)"
          >
            账户API错误
          </el-tag>
          <el-tag
            v-if="row.userStat !== 888 && row.countStat === 999"
            class="el-tag-line"
            size="mini"
            style="cursor: pointer"
            type="danger"
            @click="openMessage(row, true)"
          >
            统计API错误
          </el-tag>
        </template>

        <!-- CPA报警 -->
        <template slot="cpa" slot-scope="{ row }">
          <el-link
            v-if="!row.cpa.mobileValue"
            :underline="false"
            @click="openCpaEdit(row)"
          >
            未设置CPA <i class="el-icon-edit-outline"></i>
          </el-link>

          <el-link
            v-if="row.cpa.mobileValue"
            :underline="false"
            @click="openCpaEdit(row)"
          >
            已设置CPA <i class="el-icon-edit-outline"></i>
          </el-link>
        </template>

        <!-- 状态列 -->
        <template slot="status" slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="editState(row)"
          />
        </template>

        <!-- 回传编码列 -->
        <template slot="ocpcCode" slot-scope="{ row }">
          <el-tag
            v-if="row.ocpcCode === 35"
            effect="dark"
            size="mini"
            type="success"
            >微信复制</el-tag
          >
          <el-tag
            v-if="row.ocpcCode === 1"
            effect="light"
            size="mini"
            type="success"
            >咨询按钮</el-tag
          >
          <el-tag
            v-if="row.ocpcCode === 2"
            effect="plain"
            size="mini"
            type="success"
            >表单提交</el-tag
          >
        </template>

        <!-- 最后刷新时间列 -->
        <template slot="lastDatetime" slot-scope="{ row }">
          <span>
            <i class="el-icon-time"></i>
            {{ formatTime(row.lastDatetime) }}
          </span>
        </template>

        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            v-if="$hasPermission('sem:update')"
            :underline="false"
            icon="el-icon-edit-outline"
            type="primary"
            @click="openEdit(row)"
            >修改
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此用户吗？"
            @confirm="remove(row)"
          >
            <el-link
              v-if="$hasPermission('sem:delete')"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              type="danger"
              >删除
            </el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 编辑弹窗 -->
    <vue-edit :data="current" :visible.sync="showEdit" @done="reload" />

    <!-- CPA弹窗 -->
    <vue-cpa :data="current" :visible.sync="showCpaEdit" @done="reload" />

    <!-- 错误消息弹窗 -->
    <vue-message
      :data="current"
      :message="messageType"
      :visible.sync="showMessage"
      @done="reload"
    />

    <!-- 设置推广地域弹窗 -->
    <vue-regiontarget
      :data="current"
      :visible.sync="showRegionTarget"
      @done="reload"
    />

    <!-- 设置账户预算 -->
    <vue-budget :data="current" :visible.sync="showBudget" @done="reload" />

    <!-- 单元出价弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="
        maxPriceForm.id
          ? '为[' + maxPriceForm.username + ']设置目标转化出价'
          : '设置目标转化出价'
      "
      :visible.sync="maxPriceShowEdit"
      custom-class="ele-dialog-form"
      width="480px"
      @closed="maxPriceForm = {}"
    >
      <el-form ref="maxPriceForm" :model="maxPriceForm" label-width="120px">
        <el-form-item>
          <label slot="label">
            <span>目标转化出价</span>
            <el-popover
              content="设置目标OCPC出价。"
              placement="bottom-start"
              trigger="hover"
              width="200"
            >
              <i
                slot="reference"
                class="el-tooltip el-icon-_question"
                style="
                  cursor: pointer;
                  vertical-align: middle;
                  margin-left: 8px;
                  margin-top: -3px;
                "
              ></i>
            </el-popover>
          </label>
          <el-input-number
            v-model="maxPriceForm.maxPrice"
            :controls="false"
            class="ele-fluid ele-text-left"
            controls-position="right"
            placeholder="范围：0.01, 9999.00"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="maxPriceShowEdit = false">关闭</el-button>
        <el-button
          :loading="maxPriceLoading"
          type="primary"
          @click="setmaxPriceSave"
          >确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 设置回传方式 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="
        ocpcForm.id
          ? '为[' + ocpcForm.username + ']设置回传方式'
          : '设置回传方式'
      "
      :visible.sync="showOcpcEdit"
      custom-class="ele-dialog-form"
      width="600px"
      @closed="ocpcForm = {}"
    >
      <el-form ref="ocpcForm" :model="ocpcForm" label-width="120px">
        <el-form-item label="回传方式" style="margin-left: -12px">
          <div style="margin-left: 10px">
            <el-radio v-model="ocpcForm.ocpcType" :label="1">自动回传</el-radio>
            <el-radio v-model="ocpcForm.ocpcType" :label="2">手动回传</el-radio>
          </div>
        </el-form-item>
        <el-form-item v-if="ocpcForm.ocpcType === 1">
          <span slot="label"
            >回传时间
            <el-popover
              content="当转化链接满足回传时间时,将自动进行线索回传,默认系统设置参数0,单位秒。"
              placement="bottom-start"
              trigger="hover"
            >
              <i
                slot="reference"
                class="el-tooltip el-icon-_question"
                style="cursor: pointer; margin-right: 10px"
              ></i>
            </el-popover>
          </span>
          <el-input-number
            v-model="ocpcForm.ocpcTime"
            :controls="false"
            :max="600"
            :min="0"
            class="ele-fluid ele-text-left"
            controls-position="right"
            placeholder="回传时间, 取值范围：[5, 600]"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showOcpcEdit = false">取消</el-button>
        <el-button :loading="ocpcLoading" type="primary" @click="setOcpc"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueRegiontarget from "./vue-regiontarget";
import VueMessage from "./vue-message";
import VueBudget from "./vue-budget";
import VueEdit from "./vue-edit";
import VueCpa from "./vue-cpa";

export default {
  name: "semAccount",
  components: { VueEdit, VueMessage, VueRegiontarget, VueBudget, VueCpa },
  data() {
    return {
      //市场列表
      BazaarList: [],
      //开户渠道
      channelList: [],
      //归属客户
      customerList: [],
      //负责人
      principalList: [],
      // 表格高度
      defaultHeight: 0,
      // 落地页
      DomainUrlList: [],
      // 落地页
      TempDomainUrlList: [],
      // 回传方式
      ocpcTypeList: [
        { value: 1, label: "自动回传" },
        { value: 2, label: "手动回传" },
      ],
      // 预算弹窗
      maxPriceShowEdit: false,
      // 预算表单
      maxPriceForm: {},
      // 预算加载中
      maxPriceLoading: false,
      // 推广账户状态
      userStatList: [
        { value: 1, label: "开户金未到" },
        { value: 2, label: "正常生效" },
        { value: 3, label: "余额为零" },
        { value: 4, label: "审核未通过" },
        { value: 6, label: "审核中" },
        { value: 7, label: "被禁用" },
        { value: 8, label: "待激活" },
        { value: 11, label: "账户预算不足" },
        { value: 888, label: "账户API错误" },
        { value: 999, label: "统计API错误" },
      ],
      // 表格数据接口
      url: "/sem/read",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
        },
        {
          prop: "username",
          label: "推广账户",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "contact",
          slot: "contact",
          label: "账户负责人",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "domainurl",
          label: "推广落地页",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "domainurl",
          minWidth: 140,
        },
        {
          prop: "regionName",
          label: "推广地域",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "regionName",
        },
        {
          prop: "balance",
          label: "账户余额",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "balance",
        },
        {
          width: 100,
          prop: "budget",
          label: "账户预算",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "budget",
        },
        {
          prop: "ocpcBid",
          slot: "ocpcBid",
          label: "OCPC出价",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "rebate",
          label: "账户返点",
          sortable: "custom",
          slot: "rebate",
          showOverflowTooltip: true,
        },
        {
          prop: "cost",
          show: false,
          label: "累积消费",
          sortable: "custom",
          slot: "cost",
          showOverflowTooltip: true,
        },
        {
          prop: "ocpcType",
          label: "回传方式",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "ocpcType",
        },
        {
          width: 100,
          prop: "cpa",
          label: "CPA报警",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "cpa",
        },
        {
          prop: "ocpcCode",
          label: "转换类型",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "ocpcCode",
        },
        {
          width: 80,
          prop: "status",
          label: "状态",
          sortable: "custom",
          resizable: false,
          slot: "status",
        },
        {
          prop: "userStat",
          label: "推广状态",
          sortable: "custom",
          showOverflowTooltip: true,
          slot: "userStat",
        },
        {
          prop: "userRquota",
          label: "账户配额",
          sortable: "custom",
          slot: "userRquota",
          showOverflowTooltip: true,
        },
        {
          prop: "lastDatetime",
          label: "同步时间",
          sortable: "custom",
          resizable: false,
          slot: "lastDatetime",
        },
        {
          columnKey: "action",
          label: "操作",
          width: 130,
          resizable: false,
          slot: "action",
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示地域弹窗
      showRegionTarget: false,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示设置预算
      showBudget: false,
      // 是否显示错误弹窗
      showMessage: false,
      // 当前消息类别
      messageType: false,
      // 是否显示CPA编辑弹窗
      showCpaEdit: false,
      // 回传方式表单
      ocpcForm: Object.assign(
        {},
        {
          ocpcType: 1,
        }
      ),
      // 回传方式提交状态
      ocpcLoading: false,
      // 回传方式弹窗
      showOcpcEdit: false,
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    /*市场被改变*/
    changeBazaarId(value) {
      this.reload();
      this.DomainUrlList = [];
      for (let i in this.TempDomainUrlList) {
        if (this.TempDomainUrlList[i].bazaar === value) {
          this.DomainUrlList.push(this.TempDomainUrlList[i]);
        }
      }
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /*表格数据加载*/
    parseData(res) {
      if (res.code === 0) {
        this.TempDomainUrlList = res.website;
        this.BazaarList = res.bazaar;
        this.channelList = res.channel;
        this.customerList = res.customer;
        this.principalList = res.principal;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /*数值格式化*/
    formatquota(value) {
      if (value < 999999) {
        return value;
      }
      return "无限制";
    },
    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      this.reload();
    },

    /* 显示编辑 */
    openEdit(row) {
      this.$http
        .get("/sem/getDomainURL")
        .then((res) => {
          if (res.data.code === 0) {
            row.channel = res.data.channel;
            row.customer = res.data.customer;
            row.principal = res.data.principal;
            row.bazaar = res.data.bazaar;
            row.website = res.data.website;
            this.current = row;
            this.showEdit = true;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    /* 预算编辑 */
    openBudget(row) {
      if (!this.$hasPermission("sem:budget")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.current = row;
      this.showBudget = true;
    },

    /* 设置CPA */
    openCpaEdit(row) {
      if (!this.$hasPermission("sem:cpa")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.current = row;
      this.showCpaEdit = true;
    },

    /* 显示错误弹窗 */
    openMessage(row, type) {
      this.current = row;
      this.messageType = type;
      this.showMessage = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .delete("/sem/delete/id/" + row.id)
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    /*打开OCPC回传方式*/
    openOcpc(obj) {
      if (obj === false) {
        if (!this.selection.length) {
          this.$message.error("请至少选择一条数据");
          return;
        }
        this.ocpcForm = Object.assign(
          {},
          {
            ocpcType: 1,
          }
        );
      } else {
        this.ocpcForm = Object.assign({}, obj);
      }
      this.showOcpcEdit = true;
    },

    /*设置OCPC回传方式*/
    setOcpc() {
      this.ocpcLoading = true;
      const ocpcTime = this.ocpcForm.ocpcTime;
      const ocpcType = this.ocpcForm.ocpcType;
      let ids = this.selection.map((d) => d.id);
      if (this.ocpcForm.id) {
        ids.push(this.ocpcForm.id);
      }
      this.$http
        .put("/sem/updateOcpc", {
          type: ocpcType,
          ocpcTime: ocpcTime,
          id: ids.join(","),
        })
        .then((res) => {
          this.ocpcLoading = false;
          if (res.data.code === 0) {
            this.showOcpcEdit = false;
            this.$message({ type: "success", message: res.data.msg });
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.ocpcLoading = false;
          this.$message.error(e.message);
        });
    },

    /*OCPC目标出价*/
    refreshOcpcbid() {
      if (!this.$hasPermission("sem:ocpcbid")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.maxPriceLoading = false;
      this.maxPriceForm = {};
      this.maxPriceShowEdit = true;
    },

    /*设置OCPC目标出价预算*/
    openMaxPriceEdit(row) {
      if (!this.$hasPermission("sem:ocpcbid")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.maxPriceLoading = false;
      this.maxPriceForm = {
        id: row.id,
        maxPrice: row.ocpcBid,
        username: row.username,
      };
      this.maxPriceShowEdit = true;
    },

    /*OCPC目标出价表单*/
    setmaxPriceSave() {
      this.$refs["maxPriceForm"].validate((valid) => {
        if (valid) {
          let requestArray = [];
          this.maxPriceLoading = true;
          let selectionArray = [];
          if (this.maxPriceForm.id) {
            selectionArray.push(this.maxPriceForm.id);
          } else {
            selectionArray = this.selection.map((d) => d.id);
          }
          selectionArray.forEach((item) => {
            requestArray.push(
              this.$http.put("/sem/updateOcpcBid", {
                id: item,
                maxPrice: this.maxPriceForm.maxPrice,
              })
            );
          });
          Promise.all(requestArray)
            .then((res) => {
              this.maxPriceLoading = false;
              this.maxPriceShowEdit = false;
              this.reload();
              for (let i = 0; i < res.length; i++) {
                if (res[i].data.code === 0) {
                  setTimeout(() => {
                    this.$message({
                      type: "success",
                      message: res[i].data.msg,
                    });
                  }, 200);
                } else {
                  setTimeout(() => {
                    this.$message.error(res[i].data.msg);
                  });
                }
              }
            })
            .catch((e) => {
              this.maxPriceLoading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    /*批量刷新*/
    refreshBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要同步选中的用户数据吗?", "提示", {
        confirmButtonText: "更新",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let requestArray = [];
          const selectionArray = this.selection.map((d) => d.id);
          const loading = this.$loading({ lock: true });
          selectionArray.forEach((item) => {
            requestArray.push(
              this.$http.put("/sem/updateUser", {
                id: item,
              })
            );
          });
          Promise.all(requestArray)
            .then(() => {
              loading.close();
              this.reload();
            })
            .catch((e) => {
              this.$message.error(e.message);
              loading.close();
            });
        })
        .catch(() => {});
    },

    /*设置账户推广地域*/
    setRegionTargetBatch() {
      if (!this.$hasPermission("sem:regiontarget")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      const selectionArray = this.selection.map((d) => d.id);
      this.current = { ids: selectionArray };
      this.showRegionTarget = true;
    },

    /*设置账户推广地域*/
    openRegionTarget(row) {
      if (!this.$hasPermission("sem:regiontarget")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.$http
        .post("/sem/regionTarget", { id: row.id })
        .then((res) => {
          if (res.data.code === 0) {
            let regionTarget = [];
            if (res.data.data.regionTarget) {
              regionTarget = res.data.data.regionTarget;
            }
            row.regionTarget = regionTarget;
            let checkedKeys = [];
            for (let i = 0; i < regionTarget.length; i++) {
              if (regionTarget[i].children.length === 0) {
                checkedKeys.push(regionTarget[i].id);
              }
              if (regionTarget[i].children.length > 0) {
                for (const item of regionTarget[i].children) {
                  checkedKeys.push(item.id);
                }
              }
            }
            row.defaultCheckedKeys = checkedKeys;
            this.current = row;
            this.showRegionTarget = true;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的用户吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const iad = this.selection.map((d) => d.id);
          const loading = this.$loading({ lock: true });
          this.$http
            .delete("/sem/delete", {
              data: { id: iad.join(",") },
            })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    /* 更改状态 */
    editState(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .put("/sem/update/state/" + row.id, { status: row.status })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({ type: "success", message: res.data.msg });
          } else {
            row.state = !row.state ? 1 : 0;
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /*时间格式化*/
    formatTime(value) {
      const stamp = new Date().getTime() - new Date(value).getTime();
      if (stamp >= 1000 * 60 * 60 * 24) {
        return ((stamp / 1000 / 60 / 60 / 24) | 0) + "天前";
      } else if (stamp >= 1000 * 60 * 60) {
        return ((stamp / 1000 / 60 / 60) | 0) + "小时前";
      } else if (stamp >= 60000) {
        //1分钟以内为：刚刚
        return ((stamp / 1000 / 60) | 0) + "分钟前";
      }
      return "刚刚";
    },
  },
};
</script>

<style scoped>
.ele-table-tool .is-disabled {
  cursor: not-allowed;
  filter: Alpha(opacity=0.65);
  -moz-opacity: 0.65;
  opacity: 0.65;
}
</style>
